<template>
<div>
<!--  顶部查询区域-->
  <div class="search-box">
    <a-form :form="form" @submit="handleSearch" :layout="formLayout">
          <a-form-item
              class="q-form"
             :label-col="formItemLayout.labelCol"
             :wrapper-col="formItemLayout.wrapperCol"
             label="销售属性编号">
            <a-input
                v-decorator="[ 'id', {rules: [{ required: false, message: '请输入销售属性编号', }, ], },]" placeholder="请输入销售属性编号"
            />
          </a-form-item>
          <a-form-item
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
              label="名称">
            <a-input
                v-decorator="[ 'name', {rules: [{ required: false, message: '请输入名称', }, ], },]" placeholder="请输入名称"
            />
          </a-form-item>
      <a-row>
        <a-form-item :wrapper-col="buttonItemLayout.wrapperCol" class="q-form-item">
          <a-button html-type="submit" class="q-btn">
            查询
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
            重置
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>
  </div>
<!--  卡片区域-->
  <div class="card-box">
    <a-card :bordered="true">
      <a-button class="editable-add-btn" @click="showModal">
        添加销售属性
      </a-button>
      <a-pagination
          class="pagination-box"
          v-model="q.pageNo"
          :page-size-options="pageSizeOptions"
          :total="total"
          :show-total="() => `共 ${total} 条`"
          show-size-changer
          :page-size="q.pageSize"
          @change="onChange"
          @showSizeChange="onShowSizeChange"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
      <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false" :scroll="{ x:'100%' }">
        <template slot="operation" slot-scope="text, record">
          <a-button class="edit-btn" type="link" size="small" @click="editModal(record)">编辑</a-button>
          <a-button class="del-btn" type="link" size="small" @click="delUnit(record.id)">删除</a-button>
        </template>
      </a-table>
    </a-card>
  </div>
<!--  弹窗区域-->
  <a-modal v-model="visible" :title="isEdit?'编辑销售属性':'添加销售属性'" ok-text="确认" cancel-text="取消" @ok="hideModal">
    <a-form>
      <a-form-item label="名称">
        <a-input
            v-model="unit.name"
            placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="选项 (按回车键输入下一个)">
          <a-select
              v-model="unit.options"
              mode="tags"
              :size="size"
              placeholder="请输入"
              style="width: 100%"
              @change="handleChange"
          >
          </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</div>
</template>

<script>
import {getSpecPage,editSpec,deleteSpec} from '@/api'
export default {
  name: "unit",
  data() {
    return {
      size: 'default',
      visible: false,
      isEdit:false,
      checkNick: false,
      form:this.$form.createForm(this),
      unit: {
        name:'',
        options:[]
      },
      pageSizeOptions: ['20','50','100'],
      total: 1,
      q:{
        pageSize:20,
        pageNo:1,
      },
      formLayout: 'inline',
      dataSource: [], //表格的数据源
      columns: [
        {
          title: '销售属性编号',
          dataIndex: 'id',
          width: 150,
          align:'center',
          scopedSlots: { customRender: 'id' },
        },
        {
          title: '名称',
          dataIndex: 'name',
          width: 200,
          align:'center',
        },
        {
          title: '选项',
          dataIndex: 'options',
          width: 300,
          align:'center',
        },
        {
          title: '创建时间',
          dataIndex: 'createdAt',
          width: 200,
          align:'center',
        },
        {
          title: '更新时间',
          dataIndex: 'updatedAt',
          width: 200,
          align:'center',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 200,
          align:'center',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    };
  },
  computed: {
    formItemLayout() {
      const { formLayout } = this;
      return formLayout === 'horizontal'
          ? {
            labelCol: { span: 3 },
            wrapperCol: { span: 9 },
          }
          : {};
    },
    buttonItemLayout() {
      const { formLayout } = this;
      return formLayout === 'horizontal'
          ? {
            wrapperCol: { span: 14, offset: 4 },
          }
          : {};
    },
  },
  methods: {
    handleChange(value) {
      console.log(`Selected: ${value}`);
    },
    //查询
    handleSearch(e) {
      e.preventDefault();
      this.form.validateFields(async (error, values) => {
        this.q.id=values.id
        this.q.name=values.name
        this.getSpecPageFn()
      });
    },
    //重置
    handleReset() {
      this.form.resetFields();
      this.q.pageNo=1
      this.q.id=null
      this.q.name=null
      this.getSpecPageFn()
    },
    //页码发生变化的回调
    onChange(current) {
      this.q.pageNo = current
      this.getSpecPageFn()
    },
    onShowSizeChange(current, pageSize) {
      this.q.pageNo = current
      this.q.pageSize=pageSize
      this.getSpecPageFn()
    },
    //添加
    showModal() {
      this.visible = true
      this.isEdit=false
      this.unit={}
    },
    //编辑
   async editModal(record){
     this.unit={
       id:record.id,
       name:record.name,
       options: record.options ? JSON.parse(record.options) : [],

     }
     this.isEdit=true
     this.visible = true;
    },
    async hideModal() {
      this.unit.options = JSON.stringify(this.unit.options)
      await editSpec(this.unit)
      this.visible = false
      this.getSpecPageFn()
    },
     delUnit(id){
      this.$confirm({
        title: '提示',
        content: '确定要永久删除这条数据吗',
        okText: '确认',
        cancelText: '取消',
        onOk: async ()=> {
          if(this.total-(this.q.pageNo-1)*this.q.pageSize===1){
            this.q.pageNo--
            if(this.q.pageNo===0){
              this.q.pageNo=1
            }}
          await deleteSpec(id)
           this.getSpecPageFn()
         },
        onCancel:()=> {},
      });
     },

    //获取单位分页
   async getSpecPageFn(){
      const res=await getSpecPage(this.q)
     this.dataSource=res.value.data
     this.q.pageSize=res.value.pageSize
     this.q.pageNo=res.value.pageNo
     this.total=res.value.total
    }
  },
  mounted(){
    this.getSpecPageFn()
  }
};

</script>

<style scoped lang="less">
.search-box{
  margin-bottom: 50px;
  .btn-search{
    background-color: #010101;
    color: white;
    margin-right: 20px;
  }
}
.editable-add-btn{
  margin-bottom: 30px;
  background-color: #010101;
  color: white;
}
.pagination-box{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.q-form{
  margin-right: 70px;
}
.q-form-item{
  margin-left: 68px;
  margin-top: 20px;
}
.q-btn{
  background-color: #010101;
  color: white;
}
.edit-btn{
  color: black;
}
.del-btn{
  color: black;
}
</style>
